
// https://suggest.taobao.com/sug?code=utf-8&q=${ text }&extras=1&area=c2c&bucketid=atb_search&pid=mm_26632258_3504122_32538762&unid=&clk1=a99b675faae148dd8bb42db1e8210bb5&_=1653401949118&callback=jsonp27

// 获取元素
const sinp = document.querySelector('input')
const ulBox = document.querySelector('ul')

// 绑定事件
sinp.addEventListener('input',() => {
    const  text =sinp.value.trim()
    // 使用  jsonp  手段请求数据
    // 创建  script  标签
    const script = document.createElement('script')
//    设置  script 标签的src  地址
script.src = ` https://suggest.taobao.com/sug?code=utf-8&q=${text}&extras=1&area=c2c&bucketid=atb_search&pid=mm_26632258_3504122_32538762&unid=&clk1=a99b675faae148dd8bb42db1e8210bb5&_=1653401949118&callback=jsonp27 `
console.log(script);
// 插入到页面才能发送
document.body.appendChild(script)
//    删除掉
script.remove()
})
// 函数要放在全局
function jsonp27(res){
    console.log(res);
   if(!res.result){
       ulBox.style.display= 'none'
       return
   }
   let str =''
   res.result.forEach(item =>{
       str +=`
       <li>${item[0]}</li>`
   })
   ulBox.innerHTML =str
   ulBox.style.display='block'
}


// 获取元素
const cateBox = document.querySelector('.category > .right')
const filterBox = document.querySelector('.filter > .right')
const saleBox = document.querySelector('.sale > .right')
const sortBox = document.querySelector('.sort > .right')
const listBox = document.querySelector('.list')
const leftBtn = document.querySelector('.pagenation > .right > .left')
const rightBtn = document.querySelector('.pagenation > .right > .right')
const totalBtn = document.querySelector('.pagenation > .right > .total')
const selectBox = document.querySelector('.pagenation > .right > select')
const inp = document.querySelector('.pagenation > .right > input')
const box22 = document.querySelector('.lim1')
const searchInp = document.querySelector('.search > .right > input')

// 1. 请求分类列表
getCateList()
async function getCateList() {
  // 1-1. 发送请求, 请求分类列表
  const res = await pAjax({ url: 'http://localhost:8888/goods/category', dataType: 'json' })
  

// 1-2. 利用 res.list 渲染分类部分
let str = '<li class="cate active">全部</li>'
res.list.forEach(item => {
  str += `
    <li class="cate">${ item }</li>
  `
})
cateBox.innerHTML = str
}


// 准备一个变量, 表示参数
const listInfo = {
    current: 3,
    pagesize: 20,
    search: '',
    filter: '',
    saleType: 10,
    sortType: 'id',
    sortMethod: 'ASC',
    category: ''
  }

// 2. 请求商品列表
getGoodsList()
async function getGoodsList() {
  // 2-1. 发送请求
  const res = await pAjax({
    url: 'http://localhost:8888/goods/list',
    dataType: 'json',
    data: listInfo
  })

  // 2-2. 渲染页面
  let str = ''
  res.list.forEach(item => {
    str += `
      <li data-id="${ item.goods_id }">
        <div class="show">
          <img src="${ item.img_big_logo }" alt="">
          ${ item.is_hot ? '<span class="hot">HOT</span>' : '' }
          ${ item.is_sale ? '<span class="sale">SALE</span>' : '' }
        </div>
        <div class="info">
          <p class="title">
            ${ item.title }
          </p>
          <p class="price">
            <span class="current">
              ￥${ item.current_price }
            </span>
            <span class="old">
              ￥${ item.price }
            </span>
          </p>
          <p class="add">
            <button data-id="${ item.goods_id }">加入购物车</button>
          </p>
        </div>
      </li>
    `
  })
  listBox.innerHTML = str
   // 2-3. 渲染分页器相关信息
   leftBtn.className = listInfo.current === 1 ? 'left disable' : 'left'
   rightBtn.classList = listInfo.current === res.total ? 'right disable' : 'right'
   totalBtn.innerText = listInfo.current + ' / ' + res.total
   selectBox.value = listInfo.pagesize
   inp.value = listInfo.current
   inp.dataset.total = res.total
}
//  3. 各种商品筛选事件
// 事件委托, 委托给谁 最大的盒子
box22.addEventListener('click', e => {
    
  // 3-1. 判断点击的是分类按钮
  if (e.target.className === 'cate') {
    
    // 切换类名
    for (let i = 0; i < cateBox.children.length; i++) {
      cateBox.children[i].classList.remove('active')
    }
    e.target.classList.add('active')

    // 修改 listInfo 内的信息
    const text = e.target.innerText
    // 修改的是 category 信息
    listInfo.category = text === '全部' ? '' : text
    // 回到第一页
    listInfo.current = 1

    // 重新调用 getGoodsList
    getGoodsList()
  }
  // 3-2. 判断点击的是筛选按钮
  if (e.target.className === 'filter_item') {
    // 修改类名
  
    for (let i = 0; i < filterBox.children.length; i++) {
      filterBox.children[i].classList.remove('active')
    }
    e.target.classList.add('active')

    // 修改 listInfo 内的信息
    listInfo.filter = e.target.dataset.type
    listInfo.current = 1

    // 从新执行 getGoodsList
    getGoodsList()
  }

  // 3-3. 判断点击的是折扣按钮
  if (e.target.className === 'sale_item') {
    for (let i = 0; i < saleBox.children.length; i++) {
      saleBox.children[i].classList.remove('active')
    }
    e.target.classList.add('active')

    listInfo.saleType = e.target.dataset.type
    listInfo.current = 1

    getGoodsList()
  }
   // 3-4. 判断点击的是排序按钮
   if (e.target.className === 'sort_item') {
    for (let i = 0; i < sortBox.children.length; i++) {
      sortBox.children[i].classList.remove('active')
    }
    e.target.classList.add('active')

    listInfo.sortType = e.target.dataset.type
    listInfo.sortMethod = e.target.dataset.method

    getGoodsList()
  }
  // 3-5. 判断点击的是下一页按钮
  if (e.target.className === 'right' && e.target.nodeName === 'SPAN') {
    listInfo.current++
    getGoodsList()
  }
   // 3-6. 判断点击的是上一页按钮
   if (e.target.className === 'left' && e.target.nodeName === 'SPAN') {
    listInfo.current--
    getGoodsList()
  }
   // 3-7. 判断点击的是跳转按钮
   if (e.target.className === 'go') {
    // 拿到前一个文本框内的 value
    let page = e.target.previousElementSibling.value - 0
    const total = e.target.previousElementSibling.dataset.total - 0

    // 判断是否是 NaN
    if (!page) page = 1
    if (page < 1) page = 1
    if (page >= total) page = total
    page = parseInt(page)

    // 修改 listInfo 内的信息
    listInfo.current = page

    getGoodsList()
  }
})
// 一页显示多少条的 select
selectBox.addEventListener('change', () => {
    // 修改 listInfo 内的信息
    listInfo.pagesize = selectBox.value - 0
    listInfo.current = 1
    getGoodsList()
  })
  
  // 模糊搜索
  searchInp.addEventListener('input', () => {
    // 修改 listInfo 内的信息
    listInfo.search = searchInp.value.trim()
    listInfo.current = 1
    getGoodsList()
  })


//   4. 跳转购物车
// 点击加入购物车   按钮 ， 会进行加入购物车
// 用事件委托
listBox.addEventListener('click', e =>{
    // 4-1.判断点击是li  标签， 跳转到详情页
    // 让  li  内的标签都进行  穿透效果
    if(e.target.nodeName ==='LI'){
        console.log('跳');
        // 拿到你点击商品的  id 把id 存在 localStroage  内或者   sessionStroage  内
   const goodsId = e.target.dataset.id 
   window.sessionStorage.setItem('goodsId',goodsId)


        //  跳转详情页
window.location.href='http://127.0.0.1:5500/xiangmu/src/html/04xiangqing.html'

    }


// 4-2.判断点击的是  加入购物  按钮 ， 加入购物车操作

if(e.target.nodeName === 'BUTTON'){
    // 拿到当前商品的商品  id 
    const goodsId = e.target.dataset.id 
//   执行加入购物车操作
addCart(goodsId)
}

})


// 加入购物车的处理函数

// 不能随便加入购物车 ,必须登陆以后， 才知道哪里加入
// 没有登陆过 跳转回  登录页
// 登录过发送请求加入购物车
// 如果是401  过期  跳转回  登录页
// 是 1  加入购物车  成功

async function  addCart(goodsId){
    // 1.拿到  localStorage 内的  id  和 token
    const   id  = window.localStorage.getItem('id')
    const  token = window.localStorage.getItem('token')
    // 2.验证id  是否  存在
    if(!id){
        const  res  = window.confirm('您还没有登陆，请登录后购买，点击确定跳转回登录页，点击取消留在当前页')
        if(res){
            window.location.href = 'http://127.0.0.1:5500/xiangmu/src/html/02denglu.html'
            return
        }
        return
    }
const  res =await pAjax({
    url:'http://localhost:8888/cart/add',
    method: 'post',
    data: { id, goodsId },
   headers: { authorization: token },
    dataType:'json'
})

if(res.code === 401 ){
    const  res  = window.confirm('您的登录已经过期，请从新登录后购买，点击确定跳转回登录页，点击取消留在当前页')
    if(res){
        window.location.href = 'http://127.0.0.1:5500/xiangmu/src/html/02denglu.html'
        return
    }
    return
}

if(res.code === 1){
    alert('加入购物车成功')
}

}